<template>
  <div>
    <div style="height: 100%" class="higBox">
      <div :id="id" style="height: 100%"></div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    props: {
      id: {
        type: String,
        required: true,
      },
      num: {
        type: Number,
        default: 86
      },
      dataList: {
        type: Array,
        default: [{
          average:20,
          typeName:'已完成',
          percent:0.2
        },{
          average:25,
          typeName:'进行中',
          percent:0.25
        },{
          average:8,
          typeName:'已超时',
          percent:0.08
        },{
          average:14,
          typeName:'未启动',
          percent:0.14
        },{
          average:13,
          typeName:'已暂停',
          percent:0.13
        },{
          average:20,
          typeName:'待验收',
          percent:0.2
        }]
      },
      colorList: {
        type: Array,
        default: ['#D56383','#00FF95','#FFE900', '#F5B157', '#1DA7FF','#2967EA']
      }
    },
    mounted() {
      let mCharts = echarts.init(document.querySelector(`#${this.id}`))
      let data = this.dataList, colorList = this.colorList
      let chartData = [],lengData=[];
      for (let i = 0; i < data.length; i++) {
        chartData.push({
            value: data[i].average,
            name: data[i].typeName,
            percent: data[i].percent,
            color: colorList[i]
        })
        lengData.push({
            name: data[i].typeName,
            color: colorList[i]
        })
      }
      this.chartData = chartData
      let a = chartData.map(t=>{
        t.value = parseInt(t.value)
        return t
      })
      const sum = a.reduce((per, cur) => per + cur.value, 0);
      const gap = (1 * sum) / 100;
      const pieData1 = [];
      const gapData = {
        name: "",
        value: gap,
        itemStyle: {
            color: "transparent",
        },
      };
      let total = 0;
      chartData.forEach((item) => {
        total += parseInt(item.value);
      });

      for (let i = 0; i < chartData.length; i++) {
        // 第一圈数据
        pieData1.push({
            ...chartData[i],
        });
        pieData1.push(gapData);
      }
      let option = {
        // tooltip: {
        //     confine: true,
        //     textStyle: {
        //       fontSize: 30 // 字体大小
        //     },
        // },
        title:{   //圆环中间内容
          text: '6000',
          subtext: '统计数',
          left:"center",
          top:"44%",
          textStyle:{
            color:"#fff",
            fontSize:36,
            align:"center"
          },
          subtextStyle: {
            fontSize: 28,
            fontWeight: '700',
            align:"center",
            color:'#fff'
          },
        },
        color:['#D56383','#00FF95','#FFE900', '#F5B157', '#1DA7FF','#2967EA'],
        // legend: {
        //     top:40,
        //     right: 30,
        //     orient: "vertical", //改变排列方式
        //     icon: "roundRect", //改变legend小图标形状
        //     itemGap: 30, // 设置legend的间距
        //     itemWidth: 30, // 设置宽度
        //     itemHeight: 15, // 设置高度
        //     textStyle: {
        //       fontSize: 18,
        //       color: "#fff",
        //     },
        //     itemStyle: {
        //       borderColor: "transparent",
        //     },
        //     data: lengData,
        // },
        series: [
          {
            name: '',
            avoidLabelOverlap: true,//防止标签重叠
            type: 'pie',
            radius: ['43%', '40%'], //大小
            center : ['50%','50%'], //位置
            hoverAnimation: true,
            labelLine: {
              show:false,
              lineStyle: {
                width: 3,
              },
              normal: {
                length: 30, // 指示线长度
                length2:80
              },
            },
            data: pieData1,
            label: {
              show: false,
              formatter: function(params){ },
              textStyle: {
                fontSize: '18',
                fontWeight: 'bold',
                color:'#fff'
              },
              rich: {
                color0: {
                  color: '#D56383',
                },
                color1: {
                  color: '#00FF95',
                },
                color3: {
                  color: '#FFE900',
                },
                color2: {
                  color: '#F5B157',
                },
                color4: {
                  color: '#1DA7FF',
                },
                color5:{
                  color:'#2967EA'
                }
              },
            },
            emphasis: {
              show: false,
            },
          },
          {
            type: 'gauge',
            zlevel: 2,
            splitNumber: 85,
            radius: '40%',
            center: ['50%', '50%'],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: true,
              length: 7,
              lineStyle: {
                width: 4,
                color: '#017383',
              },
            },
            pointer: {
              show: 0,
            },
            detail: {
              show: 0,
            },
          },
        ]
      };


      mCharts.setOption(option)
    }
  }
</script>

<style lang="less" scoped>
  .higBox{
    transform: scale(1.5);
  }
</style>